<template>
  <div class="basicinformation_add">
    <el-main>
      <div>
        <div class="title">
          <span>基本信息</span>
          <div style="font-size: 12px;display: inline;margin-left: 8px;">(带“<p style="display: inline;color: red;">*</p>
            ”为必填项)</div>
        </div>
        <div style="margin-top: 20px;display: flex;margin-bottom: 20px;">
          <div style="text-align: right;width: 100px;margin-top: 7px;margin-right: 10px;"><span
              style="color: red;">*</span>名称</div>
          <div style="width: 300px;">
            <el-input v-model="data.name" :disabled="true" ></el-input>
          </div>
        </div>
        <div style="margin-top: 20px;display: flex;margin-bottom: 20px;">
          <div style="text-align: right;width: 100px;margin-top: 7px;margin-right: 10px;"><span
              style="color: red;">*</span>编号</div>
          <div style="width: 300px;">
            <el-input v-model="data.code" :disabled="true"></el-input>
          </div>
        </div>
      </div>
      <div>
        <div class="title">
          <span>通讯信息</span>
          <div style="font-size: 12px;display: inline;margin-left: 8px;">(带“<p style="display: inline;color: red;">*</p>
            ”为必填项)</div>
        </div>
        <div style="margin-top: 20px;display: flex;margin-bottom: 20px;">
          <div style="text-align: right;width: 100px;margin-top: 7px;margin-right: 10px;"><span
              style="color: red;">*</span>联系人</div>
          <div style="width: 300px;">
            <el-input v-model="data.contact" :disabled="true"></el-input>
          </div>
        </div>
        <div style="margin-top: 20px;display: flex;margin-bottom: 20px;">
          <div style="text-align: right;width: 100px;margin-top: 7px;margin-right: 10px;"><span
              style="color: red;">*</span>联系电话</div>
          <div style="width: 300px;">
            <el-input v-model="data.phone" :disabled="true" ></el-input>
          </div>
        </div>
        <div style="margin-top: 20px;display: flex;margin-bottom: 20px;">
          <div style="text-align: right;width: 100px;margin-top: 7px;margin-right: 10px;"><span
              style="color: red;">*</span>所在城市</div>
          <div style="width: 300px;">
            <el-input v-model="data.city" :disabled="true"></el-input>
          </div>
        </div>
        <div style="margin-top: 20px;display: flex;margin-bottom: 20px;">
          <div style="text-align: right;width: 100px;margin-top: 7px;margin-right: 10px;"><span
              style="color: red;">*</span>所在区</div>
          <div style="width: 300px;">
            <el-input v-model="data.area" :disabled="true"></el-input>
          </div>
        </div>

        <div style="margin-top: 20px;display: flex;margin-bottom: 20px;">
          <div style="text-align: right;width: 100px;margin-top: 7px;margin-right: 10px;">详细地址</div>
          <div style="width: 300px;">
            <el-input v-model="data.addr" :disabled="true"></el-input>

          </div>
        </div>
      </div>
      <div>
        <div class="title">
          <span>财务信息</span>

          <div style="font-size: 12px;display: inline;margin-left: 8px;">(带“<p style="display: inline;color: red;">*</p>
            ”为必填项)</div>
        </div>
        <div style="margin-top: 20px;display: flex;margin-bottom: 20px;">
          <div style="text-align: right;width: 100px;margin-top: 7px;margin-right: 10px;">开户名称</div>
          <div style="width: 300px;">
            <el-input v-model="cwxx_khmc" :disabled="true"></el-input>

          </div>
        </div>
        <div style="margin-top: 20px;display: flex;margin-bottom: 20px;">
          <div style="text-align: right;width: 100px;margin-top: 7px;margin-right: 10px;">开户银行</div>
          <div style="width: 300px;">
            <el-input v-model="cwxx_khyh" :disabled="true"></el-input>

          </div>
        </div>
        <div style="margin-top: 20px;display: flex;margin-bottom: 20px;">
          <div style="text-align: right;width: 100px;margin-top: 7px;margin-right: 10px;">银行账号</div>
          <div style="width: 300px;">
            <el-input v-model="cwxx_yhzh" :disabled="true"></el-input>

          </div>
        </div>
        <div style="margin-top: 20px;display: flex;margin-bottom: 20px;">
          <div style="text-align: right;width: 100px;margin-top: 7px;margin-right: 10px;">发票抬头</div>
          <div style="width: 300px;">
            <el-input v-model="cwxx_fptt" :disabled="true"></el-input>

          </div>
        </div>
        <div style="margin-top: 20px;display: flex;margin-bottom: 20px;">
          <div style="text-align: right;width: 100px;margin-top: 7px;margin-right: 10px;">税号</div>
          <div style="width: 300px;">
            <el-input v-model="cwxx_sh" :disabled="true"></el-input>

          </div>
        </div>
      </div>

      <div>
        <div class="title">
          <span>基本信息</span>
          <div style="font-size: 12px;display: inline;margin-left: 8px;">（图片上传最多可上传五张）</div>
        </div>
        <div style="margin-top: 10px;">
          <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </div>
      </div>
      <div style="margin-top: 10px;">
        <el-button type="primary" plain @click="funcback" >取消</el-button>
      </div>
    </el-main>
  </div>
</template>

<script>
  import { editsupplier,getsupplierAll } from '@/api/purchase/supplierapi'
  import { handleActivePath } from '@/utils/routes'
  import { mapActions } from 'vuex'
  export default{
    data() {
      return{
        data:{
          name: "",
          code: "",
          contact: "",
          phone: "",
          province: "",
          city: "",
          area: "",
          addr: "",
          status: 1,
          remarks: "",
        },
        jbxx_name:"",  //基本信息名称
        txxx_lxr:"",//通讯信息联系人
        txxx_lxdh:"",//通讯信息联系电话
        txxx_dh:"",//通讯信息电话
        txxx_xxdz:"",//通讯信息详细地址
        cwxx_khmc:"",//财务信息开户名称
        cwxx_khyh:"",//财务信息开户银行
        cwxx_yhzh:"",//财务信息银行账号
        cwxx_fptt:"",//财务信息发票抬头
        cwxx_sh:"",//财务信息税号
        zhxx_dlzh:"",//账号信息登录账号
        zhxx_mm:"",//账号信息密码
        info:"",//全部信息
      }
    },
    async mounted() {
      let data = {
        id:this.$route.params.id
      }
      let res = await getsupplierAll(data)
      console.log("编辑",res);
      this.info = res.list[0]
      this.data = res.list[0]
    }
    ,methods:{
      ...mapActions({
        delVisitedRoute: 'tabs/delVisitedRoute',
      }),
      funcback(){
        this.$confirm('确定返回列表页面?', '确定', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(async () => {
            const detailPath = await handleActivePath(this.$route, true)
            await this.$router.push('/purchase/initialvalue/supplier')
            await this.delVisitedRoute(detailPath)
          })
          .catch(() => {})
      },
      async addfunc(){
        if(this.data.name == ""){
          this.$message({
            message:"名称未填写",
            type:"error"
          })
          return
        }
        if(this.data.code == ""){
          this.$message({
            message:"编号未填写",
            type:"error"
          })
          return
        }
        if(this.data.contact == ""){
          this.$message({
            message:"联系人未填写",
            type:"error"
          })
          return
        }
        if(this.data.phone.length != 11){
          this.$message({
            message:"联系电话填写错误",
            type:"error"
          })
          return
        }
        if(this.data.city == ""){
          this.$message({
            message:"所在城市未填写",
            type:"error"
          })
          return
        }
        if(this.data.area == ""){
          this.$message({
            message:"所在城市未填写",
            type:"error"
          })
          return
        }
        let res = await editsupplier(this.data)
        if(res.status == 200){
          this.$message({
            message:"保存成功",
            type:"success"
          })
          this.$router.push('/purchase/initialvalue/supplier')
        }else{
          this.$message({
            message:"错误",
            type:"error"
          })
        }

      }
    }
  }
</script>

<style>
  .basicinformation_add .title {
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }

  .basicinformation_add .title span {
    display: inline-block;
    padding-left: 8px;
    font-size: 16px;
    border-left: 4px solid #1890FF;
  }

  .basicinformation_add .title p {
    display: inline;
  }
</style>
